<template>
  <div class="Area">
    <van-button type="primary" @click="showPopup">主要按钮</van-button>

    <van-popup v-model="popupflag" position="bottom">
      <van-area title="选择省市区" :area-list="areaList" ref="vanarea" @cancel="cancelhandler" @confirm="confirmhandler"></van-area>
    </van-popup>
  </div>
</template>

<script type="text/ecmascript-6">
import { Button, Popup, Area } from 'vant'
import areaList from '../common/Area'
export default {
  name: 'Area',
  data () {
    return {
      popupflag: false,
      areaList: areaList
    }
  },
  methods: {
    showPopup () {
      this.popupflag = true
    },
    cancelhandler () {
      this.$refs.vanarea.reset()
    },
    confirmhandler (event) {
      console.log(event)
      this.popupflag = false
    }
  },
  components: {
    [Button.name]: Button,
    [Popup.name]: Popup,
    [Area.name]: Area
  }
}
</script>

<style scoped lang="scss">
// .Area {
//   .van-popup {
//     .van-picker {
//       height: 100%;
//       /deep/ .van-picker__columns {
//         height: calc(100% - 44px) !important;
//       }
//     }
//   }
// }
</style>
